<template>
  <div class="cameraControl">
    <div class="orientation">
      <div @mousedown="bindControl('4')" @mouseup="bindControl('-1')">
		<i style="transform:rotate(315deg);position: relative;top:-4px;left: -6px;" class="el-icon-caret-top"></i>
	  </div>
      <div @mousedown="bindControl('0')" @mouseup="bindControl('-1')">
		  <i class="el-icon-caret-top"></i>
	  </div>
      <div @mousedown="bindControl('6')" @mouseup="bindControl('-1')">
		<i style="transform:rotate(45deg);position: relative;top:-4px;right: -6px;" class="el-icon-caret-top"></i>
	  </div>
      <div @mousedown="bindControl('2')" @mouseup="bindControl('-1')">
		<i class="el-icon-caret-left"></i>
	  </div>
      <el-tooltip content="停止控制" placement="top" effect="dark">
        <div @click="bindControl('-1')"><i class="el-icon-refresh-left"></i></div>
      </el-tooltip>
      <div @mousedown="bindControl('3')" @mouseup="bindControl('-1')">
		<i class="el-icon-caret-right"></i>
	  </div>
      <div @mousedown="bindControl('5')" @mouseup="bindControl('-1')">
		<i style="transform:rotate(225deg);position: relative;bottom:-4px;left: -6px;" class="el-icon-caret-top"></i>
	  </div>
      <div @mousedown="bindControl('1')" @mouseup="bindControl('-1')">
		<i class="el-icon-caret-bottom"></i>
	  </div>
      <div @mousedown="bindControl('7')" @mouseup="bindControl('-1')">
		<i style="transform:rotate(135deg);position: relative;bottom:-4px;right: -6px;" class="el-icon-caret-top"></i>
	  </div>
    </div>
    <div class="speed">
      <el-slider v-model="speed" @change="bindChange"></el-slider>
      <div class="txt">
        <span>减速</span>
        <span>加速</span>
      </div>
    </div>
    <div class="buttons">
      <el-button-group>
        <el-tooltip content="放大" placement="top" effect="dark">
          <div size="mini" class="el-button el-tooltip el-button--default el-button--mini is-round" @mousedown="bindControl('8')" @mouseup="bindControl('-1')">
            <i class="icon icon-1-1"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="缩小" placement="top" effect="dark">
          <div size="mini" class="el-button el-tooltip el-button--default el-button--mini is-round" @mousedown="bindControl('9')" @mouseup="bindControl('-1')">
            <i class="icon icon-1-2"></i>
          </div>
        </el-tooltip>
      </el-button-group>
      <el-button-group>
        <el-tooltip content="近焦距" placement="top" effect="dark">
          <div size="mini" class="el-button el-tooltip el-button--default el-button--mini is-round" @mousedown="bindControl('10')" @mouseup="bindControl('-1')">
            <i class="icon icon-2-1"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="远焦距" placement="top" effect="dark">
          <div size="mini" class="el-button el-tooltip el-button--default el-button--mini is-round" @mousedown="bindControl('11')" @mouseup="bindControl('-1')">
            <i class="icon icon-2-2"></i>
          </div>
        </el-tooltip>
      </el-button-group>
      <el-button-group>
        <el-tooltip content="截图" placement="top" effect="dark">
          <el-button size="mini" round @click="bindControl('12')">
            <i class="icon icon-3-1"></i>
          </el-button>
        </el-tooltip>
      </el-button-group>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cameraControl",
    components: {},
    props: {},
    data() {
      return {
        speed: 0
      };
    },
    watch: {},
    computed: {},
    methods: {
      bindControl(type) {
        this.$emit("control", type);
      },
      bindChange(e) {
        this.$emit("sliderChange", e);
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .cameraControl {
    .orientation {
      margin: 20px auto 0;
      width: 196px;
      @include flex(space-between, center);
      flex-shrink: 0;
      min-height: 0;
      flex-wrap: wrap;

      >div {
        cursor: pointer;
        width: 60px;
        height: 60px;
        margin: 4px 0;
        border: 1px solid #eee;
        text-align: center;
        color: #d6d6d6;
        line-height: 60px;
        font-size: 40px;
        border-radius: 4px;

        &:active {
          color: #3492fc;
        }
      }
    }

    .speed {
      margin: 0 auto;
      width: 300px;
      color: #6c6c6c;

      .txt {
        @include flex(space-between, center);
      }
    }

    .buttons {
      margin-top: 50px;
      text-align: center;

      button {
        font-size: 18px;
      }

      .icon {
        display: block;
        width: 18px;
        height: 18px;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .icon-1-1 {
        background-image: url(~@/assets/image/icons/1-1.png);
      }

      .icon-1-2 {
        background-image: url(~@/assets/image/icons/1-2.png);
      }

      .icon-2-1 {
        background-image: url(~@/assets/image/icons/2-1.png);
      }

      .icon-2-2 {
        background-image: url(~@/assets/image/icons/2-2.png);
      }

      .icon-3-1 {
        background-image: url(~@/assets/image/icons/3-1.png);
      }

      .icon-3-2 {
        background-image: url(~@/assets/image/icons/3-2.png);
      }
    }

    /deep/.el-slider__button {
      width: 20px;
      height: 12px;
      border: none;
      background-color: #fff;
      border-radius: 0;
      transition: 0.2s;
      user-select: none;
      background-image: url(~@/assets/image/icons/s.png);
      background-repeat: no-repeat;
      background-size: contain;
    }

    .el-button-group {
      margin: 10px;
    }
  }
</style>
